<!DOCTYPE html>
<html>
<head>
    <title>Concave Mirror Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'bold 24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';

        // Parameters for the diagram
        const y_center = canvas.height / 2;
        const R = 240; // Radius of curvature
        const f = R / 2; // Focal length
        const mirror_pole_x = 650;
        const object_height = 50;

        // Calculate positions of points on the principal axis
        const x_C = mirror_pole_x - R; // Center of curvature: 650 - 240 = 410
        const x_F = mirror_pole_x - f; // Focal point: 650 - 120 = 530
        const x_P = x_C - 120;         // Object position P: 410 - 120 = 290
        const x_Q = x_F + 50;          // Position Q: 530 + 50 = 580

        // 1. Draw Principal Axis
        ctx.beginPath();
        ctx.moveTo(150, y_center);
        ctx.lineTo(mirror_pole_x + 20, y_center);
        ctx.stroke();

        // 2. Draw Concave Mirror
        ctx.beginPath();
        const mirror_angle = Math.asin(120 / R); // Controls the height of the mirror arc
        ctx.arc(x_C, y_center, R, -mirror_angle, mirror_angle);
        ctx.lineWidth = 5; // Make the mirror line thicker
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width for other elements

        // Function to draw points and labels
        function drawPointAndLabel(x, label, type = 'tick', dotRadius = 4) {
            ctx.beginPath();
            if (type === 'tick') {
                ctx.moveTo(x, y_center - 10);
                ctx.lineTo(x, y_center + 10);
                ctx.stroke();
            } else if (type === 'dot') {
                ctx.arc(x, y_center, dotRadius, 0, 2 * Math.PI);
                ctx.fill();
            }
            ctx.fillText(label, x, y_center + 15);
        }

        // 3. Draw Points and Labels on the Axis
        // Point P (with object)
        drawPointAndLabel(x_P, 'P', 'dot', 5);

        // Point C (Center of Curvature)
        drawPointAndLabel(x_C, 'C', 'tick');

        // Point F (Focal Point)
        drawPointAndLabel(x_F, 'F', 'tick');

        // Point Q
        drawPointAndLabel(x_Q, 'Q', 'dot', 4);

        // 4. Draw the Object at P (Upright Arrow)
        ctx.beginPath();
        // Arrow shaft
        ctx.moveTo(x_P, y_center);
        ctx.lineTo(x_P, y_center - object_height);
        // Arrowhead
        ctx.moveTo(x_P, y_center - object_height);
        ctx.lineTo(x_P - 8, y_center - object_height + 12);
        ctx.moveTo(x_P, y_center - object_height);
        ctx.lineTo(x_P + 8, y_center - object_height + 12);
        ctx.stroke();

    </script>
</body>
</html>